<template>
    <el-card style="max-width: 100%">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">深加工信息</span>
                <el-button style="margin-left: 16px" @click="deeps = true">
                    设置
                </el-button>
            </div>
            <el-descriptions title="" style="margin-top: 20px;">
                <el-descriptions-item label="班组:" span="2">{{ deepform.team }}</el-descriptions-item>
                <el-descriptions-item label="负责人:">{{ deepform.principal }}</el-descriptions-item>
                < </el-descriptions>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;;font-size: 17px;">食品安全信息</span>
            </div>
            <el-upload :on-success="Cjimg4" v-model:file-list="imagesList4" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview4" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible4">
                <img w-full :src="dialogImageUrl4" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">供应商信息</span>
                <br />
                <br />
                <span style="color:black;font-size: 15px;"><b>原料</b></span>
                &nbsp;&nbsp;
                <el-button style="margin-left: 16px">
                    设置
                </el-button>
                <br />
                <span>生产批次: {{ route.query.productionLot }}</span>
            </div>
            <h4>相关材料</h4>
            <el-upload :on-success="Cjimg5" v-model:file-list="imagesList5" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview5" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible5">
                <img w-full :src="dialogImageUrl5" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <span style="color:black;font-size: 15px;"><b>辅料</b></span>
            &nbsp;&nbsp;
            <el-button style="margin-left: 16px">
                设置
            </el-button>
            <br />
            <span>生产批次: {{ route.query.productionLot }}</span>
            <h4>相关材料</h4>
            <el-upload :on-success="Cjimg5" v-model:file-list="imagesList5" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview5" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible5">
                <img w-full :src="dialogImageUrl5" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <span style="color:black;font-size: 15px;"><b>添加剂</b></span>
            &nbsp;&nbsp;
            <el-button style="margin-left: 16px">
                设置
            </el-button>
            <br />
            <span>生产批次: {{ route.query.productionLot }}</span>
            <h4>相关材料</h4>
            <el-upload :on-success="Cjimg5" v-model:file-list="imagesList5" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview5" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible5">
                <img w-full :src="dialogImageUrl5" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <span style="color:black;font-size: 15px;"><b>包材</b></span>
            &nbsp;&nbsp;
            <el-button style="margin-left: 16px">
                设置
            </el-button>
            <br />
            <span>生产批次: {{ route.query.productionLot }}</span>
            <h4>相关材料</h4>
            <el-upload :on-success="Cjimg5" v-model:file-list="imagesList5" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview5" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible5">
                <img w-full :src="dialogImageUrl5" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">企业信息</span>
                <el-button style="margin-left: 16px" @click="deepCors = true">
                    设置
                </el-button>
            </div>
            <el-descriptions title="" style="margin-top: 20px;">
                <el-descriptions-item label="公司名称" span="2">{{ deepform.deepcor }}</el-descriptions-item>
                <el-descriptions-item label="生产许可证">{{ route.query.manufacturingLicense }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </el-card>

    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">企业照片</span>
            </div>
            <el-upload :on-success="Cjimg2" v-model:file-list="imagesList2" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview2" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible2">
                <img w-full :src="dialogImageUrl2" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>

    <!-- 添加弹出框 -->
    <div>
        <el-dialog v-model="deeps" title="深加工信息" width="500">
            <el-form :model="deepform" label-width="auto" style="max-width: 600px">
                <el-form-item label="班组:">
                    <el-input v-model="deepform.team" />
                </el-form-item>
                <el-form-item label="负责人:">
                    <el-input v-model="deepform.principal" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="deeps = false">取消</el-button>
                    <el-button type="primary" @click="addDeep()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="deepCors" title="企业信息" width="500">
            <el-form :model="deepform" label-width="auto" style="max-width: 600px">
                <el-form-item label="公司名称:">
                    <el-input v-model="deepform.deepcor" />
                </el-form-item>
                <el-form-item label="生产许可证号:">
                    <span>{{ route.query.manufacturingLicense }}</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="deepCors = false">取消</el-button>
                    <el-button type="primary" @click="addDeep1()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
//上传图片变量
const files = "http://localhost:44228/Image/"
const route = useRoute()
console.log(route.query.id, route.query.productionLot)
//深加工
const deeps = ref(false)
const deepform = reactive({
    team: "",
    principal: "",
    deepcor: "",
    productionLot: route.query.productionLot
})
const deeplist = () => {
    axios.get("Slaughter/DeepManage?batchId=" + route.query.productionLot)
        .then(res => {
            deepform.team = res.data.data.team;
            deepform.principal = res.data.data.principal;
            deepform.deepcor = res.data.data.deepcor;
        })
}
//添加深加工
const addDeep = () => {
    axios.post("Slaughter/DeepAdd", deepform)
        .then(res => {
            if (res.data.data == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                deeps.value = false
                location.reload;
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//食品安全
const dialogVisible4 = ref(false)
const dialogImageUrl4 = ref('')
const imagesList4 = ref([])
const Getimages4 = () => {
    axios.get("Goods/GetImage4?traceType=" + route.query.id)
        .then(res => {
            imagesList4.value = res.data.data;
            imagesList4.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}
const handleRemove = (uploadFile: any) => {
    var id = uploadFile.name
    axios.get("Goods/DelImages?id=" + id)
        .then(res => {
        })
}

const handlePictureCardPreview4 = (uploadFile: any) => {
    dialogImageUrl4.value = uploadFile.url!
    dialogVisible4.value = true
}

//添加
const Cjimg4 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 4
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages4();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//相关资料
const dialogVisible5 = ref(false)
const dialogImageUrl5 = ref('')
const imagesList5 = ref([])
const Getimages5 = () => {
    axios.get("Goods/GetImage5?traceType=" + route.query.id)
        .then(res => {
            imagesList5.value = res.data.data;
            imagesList5.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}

const handlePictureCardPreview5 = (uploadFile: any) => {
    dialogImageUrl4.value = uploadFile.url!
    dialogVisible4.value = true
}

//添加
const Cjimg5 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 5
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages4();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//企业图片
//企业照片
const dialogVisible2 = ref(false)
const dialogImageUrl2 = ref('')
const imagesList2 = ref([])
const Getimages2 = () => {
    axios.get("Goods/GetImage2?traceType=" + route.query.id)
        .then(res => {
            imagesList2.value = res.data.data;
            imagesList2.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}


const handlePictureCardPreview2 = (uploadFile: any) => {
    dialogImageUrl2.value = uploadFile.url!
    dialogVisible2.value = true
}
//添加
const Cjimg2 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 2
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages2();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//企业信息(深加工)
const deepCors = ref(false)
//添加深加工
const addDeep1 = () => {
    axios.post("Slaughter/DeepAdd1", deepform)
        .then(res => {
            if (res.data.data == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                deepCors.value = false
                location.reload;
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}

//钩子函数
onMounted(() => {
    //深加工反填
    deeplist();
    //食品安全图片反填
    Getimages4();
    //相关资料
    Getimages5();
    //企业图片
    Getimages2();
})

</script>